<template>
	<view >
		<view v-show="!adShow" class="main-box" >
			<scroll-view scroll-y="true" class="scroll-box" >
				<image
					:src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + info.pictureId"
					class="img" mode="widthFix" @load="loadHandle" ></image>
			</scroll-view>
		</view>
		
		<page-container position="right" :show="adShow" @beforeleave="beforeleaveHandle"  >
			<view class="main-box" >
				<view class="cutdown-box" :style="{top: navHeight + 'px'}" >
					<template v-if="!endFlag">
						<text class="time-box" >{{count}}s</text>
						<div class="cutdown-line"></div>
					</template>
					<text @click="backHandle" class="back-box" >退出</text>
				</view>
				<scroll-view scroll-y="true" class="scroll-box" >
					<image
						:src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + info.pictureId"
						class="img" mode="widthFix" @load="loadHandle" ></image>
				</scroll-view>
			</view>
		</page-container>
	</view>
	
</template>

<script>
	
	let t = ""
	
	export default {
		// props: {
		// 	info: {
		// 		type: Object,
		// 		default: function(){
		// 			return {}
		// 		}
		// 	}
		// },
		data() {
			return {
		        baseUrl: getApp().globalData.baseUrl,
				count: 30,
				endFlag: false,
				navHeight: 0,
				info: {},
				adShow: true,
				openId: uni.getStorageSync("openId"),
				appId: getApp().globalData.appId,
				mId: getApp().globalData.mId,
			};
		},
		onLoad(options) {
			let tmp = JSON.parse(decodeURIComponent(options.data));
			this.info = tmp;
			this.getAdConfigInfo();
			
		},
		mounted() {
			this.navHeight =	uni.getSystemInfoSync().navigationBarHeight || 30
		},
		beforeDestroy() {
			if(t){
				clearTimeout(t);
				t = "";
			}
		},
		
		watch: {
			endFlag(newVal,oldVal){
				console.log("=============", newVal);
			},
			count(newVal,oldVal){
				if(newVal == 0){
					// wx.disableAlertBeforeUnload({})
					
				}
			}
		},
		methods: {
			loadHandle(){
				if(!t){
					t = setInterval(() => {
						if(this.count == 0){
							clearInterval(t);
							t = 0;
							this.endFlag = true;
							
							
							//调用接口
							this.$http('/service/api/sellmachine/isAdvertisementUser', {
								F_DId: this.mId,
								AppID: this.appId,
								OpenId: this.openId
							}, res => {
								if(res.data.data){
									uni.showModal({
										title: "提示",
										content: "恭喜！获得试喝券一张",
										showCancel: false,
										success: (val) => {
											if(val.confirm){
												uni.navigateBack()
											}
										}
									})
								}else {
									uni.showModal({
										title: "提示",
										content: "领取失败，以达到每日观看广告最大赠送次数，请明天再来吧~",
										showCancel: false,
										success: (val) => {
											if(val.confirm){
												uni.navigateBack()
											}
										}
									})
								}
							},"POST")
							
							return;
						}
						this.count--;
						
					}, 1000)
				}
			},
			backHandle(){
				uni.navigateBack()
				
			},
			beforeleaveHandle() {
				this.adShow = false;
				if(this.count != 0){
					clearInterval(t);
					t = 0;
					uni.showModal({
						title: "提示",
						content: "继续观看，可领取试喝机会",
						confirmText: "继续",
						cancelText: "退出",
						success: (val) => {
							if(val.cancel){
								uni.navigateBack()
								
							}else {
								this.adShow = true;
								this.loadHandle();
							}
						}
					})
				}else {
					uni.navigateBack();
				}
			},
			getAdConfigInfo(){
				
				//调用接口
				this.$http('/service/api/sellmachine/getFirstTimeUserType', {}, res => {
					if(res.data.data && res.data.data.length > 0){
						let data = res.data.data;
						let tmpObj = {
							type2: null
						}
						for (let i = 0; i < 2; i++) {
							if(data[i]){
								if(data[i].type==2){
									tmpObj.type2 = data[i];
								}
							}
						}
						if(tmpObj.type2){
							this.count = tmpObj.type2.advertising?tmpObj.type2.advertising: 30
						}
		
					}
				},"GET")
			}
			

		}
	}
</script>

<style lang="scss">
	.main-box{
		height: 100vh;
		position: relative;

		.cutdown-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			position: fixed;
			top: 46rpx;
			left: 30rpx;
			height: 72rpx;
			
			padding: 10rpx 30rpx;
			border-radius: 36rpx;
			z-index: 50;
			background-color: rgba(0, 0, 0, 0.6);
			font-size: 26rpx;
			color: #fff;
			.time-box{
			}
			.cutdown-line{
				height: 42rpx;
				width: 1px;
				background-color: #fff;
				margin: 0 20rpx;
			}
		}
		
		.scroll-box {
			height: 100vh;
			.img{
				width: 750rpx;
			}
		}
		
	}

</style>
